<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,th,td{
            border: 1px solid #333;
        }
        table{
            border-collapse: collapse;
            width: 800px;
            text-align: center;
        }
        img{
            width: 120px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>选择</th>
                <th>名称</th>
                <th>图片</th>
                <th>单价</th>
                <th>数量</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="checkIpn"></td>
                <td>苹果</td>
                <td><img src="./imgs/1.jpg" alt=""></td>
                <td>&yen;<span class="price">3</span></td>
                <td>
                    <button class="reduce">-</button>
                    <button class="count">1</button>
                    <button class="add">+</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" class="checkIpn"></td>
                <td>橘子</td>
                <td><img src="./imgs/2.jpg" alt=""></td>
                <td>&yen;<span class="price">5</span></td>
                <td>
                    <button class="reduce">-</button>
                    <button class="count">1</button>
                    <button class="add">+</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" class="checkIpn"></td>
                <td>香蕉</td>
                <td><img src="./imgs/1.jpg" alt=""></td>
                <td>&yen;<span class="price">2</span></td>
                <td>
                    <button class="reduce">-</button>
                    <button class="count">1</button>
                    <button class="add">+</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" class="checkIpn"></td>
                <td>西瓜</td>
                <td><img src="./imgs/2.jpg" alt=""></td>
                <td>&yen;<span class="price">1</span></td>
                <td>
                    <button class="reduce">-</button>
                    <button class="count">1</button>
                    <button class="add">+</button>
                </td>
            </tr>
        </tbody>
    </table>
    <div>
        <input type="checkbox" id="all">全选
        <h3>总计：&yen; <span id="totalPrice">0.00</span></h3>
    </div>
</body>
<script>
    var checkIpns = document.getElementsByClassName('checkIpn');  //所有的复选框
    var allInp = document.getElementById('all'); //全选按钮
    var reduceBtns = document.getElementsByClassName('reduce'); //-按钮
    var addBtns = document.getElementsByClassName('add'); //+按钮
    var countEles = document.getElementsByClassName('count'); //数量
    var priceSpans = document.getElementsByClassName('price'); //单价
    var totalPrice = document.getElementById('totalPrice'); //总价

    // 1. 全选 和 取消全选
    // 计算总价： 单价 * 数量 + 原来的总价
    var checkedNum = 0;
    for(var i=0;i<checkIpns.length;i++){
        checkIpns[i].index = i;

        checkIpns[i].onchange = function(){
            // 获取单价 和 数量
            var price = priceSpans[this.index].innerHTML;
            var count = countEles[this.index].innerHTML;
            console.log('price:' + price + ',count:' + count);
            if (this.checked) {//选中
                checkedNum++;
                // 计算价格  单价  数量  原来的总价
                totalPrice.innerHTML = price * count + totalPrice.innerHTML*1
            } else {//取消勾选
                checkedNum--;
                totalPrice.innerHTML = totalPrice.innerHTML*1 - price * count;
            }
            console.log(checkedNum);
            if (checkedNum == checkIpns.length) {//全选
                allInp.checked = true;
            }else{//非全选
                allInp.checked = false;
            }
        }
    }

    allInp.onchange = function(){
        for(var i=0;i<checkIpns.length;i++){
            checkIpns[i].checked = allInp.checked;
        }

        if (allInp.checked) {//全选
            checkedNum = checkIpns.length;

            // 计算总价
            var tp = 0;
            for(var i=0;i<priceSpans.length;i++){
                var p =priceSpans[i].innerHTML; //单价
                var n =countEles[i].innerHTML; //数量
                tp += p*n ; //求和
            }
            totalPrice.innerHTML = tp;


        }else{//取消全选
            checkedNum = 0;
            // 价格：0
            totalPrice.innerHTML = 0;
        }
    }

    // 2. 数量的增减
    for(var i=0;i<addBtns.length;i++){
        addBtns[i].index = i;
        addBtns[i].onclick = function(){ //点击 +号按钮
            // 根据 +按钮 的index，查找对应的数量元素
            var countEle= countEles[this.index];
            countEle.innerHTML++;

            // 计算价格  取决于 input标签是否是选中状态
            var checkInp = checkIpns[this.index]; //对应的input标签
            var p = priceSpans[this.index].innerHTML; //单价
            if (checkInp.checked) { //选中
                totalPrice.innerHTML = totalPrice.innerHTML*1 + p*1
            }

        }
    }

    for(var i=0;i<reduceBtns.length;i++){
        reduceBtns[i].index = i;
        reduceBtns[i].onclick = function(){
            var countEle= countEles[this.index];
            countEle.innerHTML--;
            if (countEle.innerHTML == 0) { //临界值判断
                countEle.innerHTML = 1;
                return;
            }

            // 计算价格  取决于 input标签是否是选中状态
            var checkInp = checkIpns[this.index]; //对应的input标签
            var p = priceSpans[this.index].innerHTML; //单价
            if (checkInp.checked) { //选中
                totalPrice.innerHTML = totalPrice.innerHTML*1 - p*1
            }
        }
    }


    /*
        (1) 全选  反选

        (2) 数量的增减变化

        (3) 计算总价
        1> 勾选 / 取消勾选 单个复选框时，计算总价
        2> 勾选 / 取消勾选 全选按钮， 计算总价
        3> 当 单个复选框是勾选状态时，点击 + 、-,计算总价。
    */


</script>
</html>